<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .cms_login {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            background-repeat: no-repeat;
            background-image: url(login/img/3.jpg);
            /*background-image: url(login/img/bg.png);*/
            background-size: 100% 100%;
        }

        .flexCenter {
            text-align: center;
            margin: auto;
        }

        .cms_login_container {
            width: 70%;
            height: 70%;
            display: flex;
            justify-content: center;
        }

        .cms_login_image {
            width: 60%;
            height: 100%;
        }

        .cms_login_from {
            width: 40%;
            height: 100%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px #ccc;
        }

        /* .cms_login_container {
            width: 30%;
            height: 70%;
            border: 1px solid red;
        } */

        img {
            width: 100%;
            height: 100%;
        }

        .divBox {
            display: flex;
            justify-content: center;
            width: 80%;
            height: 46px;
            margin-top: 20px;
            margin-left: 10%;
            position: relative;
        }

        .cms_login_logo {
            display: flex;
            justify-content: center;
            width: 80%;
            height: 60px;
            /* border: 1px solid green; */
            margin-left: 10%;
            margin-bottom: 22px;
            margin-top: 25px;
        }

        .cms_login_img {
            width: 44px;
            height: 44px;
            position: absolute;
            top: 1px;
            left: 1px;
        }

        .cms_login_ipt {
            width: 100%;
            outline: none;
            padding-left: 50px;
        }

        .cms_login_ipt60 {
            width: 60%;
            outline: none;
            padding-left: 50px;
        }

        .cms_login_ver {
            width: 30%;
            outline: none;
            margin-left: 8%;
            border: 1px solid #c32c2c;
            background-color: #bd7070;
            line-height: 46px;
            letter-spacing: 4px;
            border-radius: 4px;
            cursor: default;
            color: white;
        }

        .margin_top60 {
            margin-top: 40px;
        }

        .login_btn {
            width: 100%;
            height: 60px;
            letter-spacing: 10px;
            font-size: 24px;
            background-color: green;
            border: none;
            outline: none;
            border-radius: 10px;
            color: white;
        }


        .regist_btn {
            width: 100%;
            height: 60px;
            letter-spacing: 10px;
            font-size: 24px;
            background-color: green;
            border: none;
            outline: none;
            border-radius: 10px;
            color: white;
        }

        .login_btn:hover {
            background-color: #044468;
            border: none;
            outline: none;
        }

        .regist_btn:hover {
            background-color: #044468;
            border: none;
            outline: none;
        }
    </style>
</head>

<body>
<div class="cms_login">
    <div class="cms_login_container flexCenter" style="min-height:390px;">
        <div class="cms_login_image" style="min-width: 380px;">
            <!-- <img src="./leftimg_04.png" alt=""> -->
        </div>
        <div class="cms_login_from" style="min-width: 380px;">
            <form>
                <div class="cms_login_logo"><span style="font-size:24px;">开放平台管理系统</span></div>
                <div class="divBox"><img class="cms_login_img" src="login/img/username_mark.png">
                    <input class="cms_login_ipt" type="text" name="username" placeholder="请输入账号" id="cms_login_username"></div>
                <div class="divBox"><img class="cms_login_img" src="login/img/password_mark.png">
                    <input type="password" name="password" placeholder="请输入密码" class="cms_login_ipt" id="cms_login_passward"></div>
                <div class="divBox">
                    <img class="cms_login_img" src="login/img/verify_mark.png">
                    <input type="text" placeholder="请输入验证码" name="ver" class="cms_login_ipt60" id="cms_login_ver_ipt">
                    <img style="width: 150px" src="/kaptcha/render">
                </div>
                <div class="divBox margin_top60" style="border:none;">
                    <input class="login_btn" type="button" value="登录" name="submit">
                </div>

                <div class="divBox margin_top60" style="border:none;">
                    <input class="regist_btn" type="button" value="注册">
                </div>
            </form>
        </div>
    </div>
</div>

<script src="login/js/jquery-1.12.4.js"></script>
<script>


    //登录按钮点击监听事件
    $(".login_btn").click(function () {
        var username = $("#cms_login_username").val();
        var password = $("#cms_login_passward").val();
        var kaptcha = $("#cms_login_ver_ipt").val();
        var param={
            username:username,
            password:password,
            kaptcha:kaptcha
        }
        $.ajax({
            type:"post",
            url:"/user/login",
            data:param,
            success:function (res) {
                console.log(res)
                if (res.code === "1001"){
                    //登录成功
                    window.location.href="index.html";
                }else if (res.code === "1002"){
                    //账号或密码错误
                    layer.msg(res.msg);
                }else {
                    //验证码错误
                    layer.msg(res.msg);
                }
            }
        })
    })


    //跳转注册页面
    $(".regist_btn").click(function () {
        window.location.href="/regist.html"
    })

</script>

</body>
</html>